<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-card class="box-card">
    <el-card class="hander-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <div>
            <el-statistic
              group-separator=","
              :precision="2"
              :value="value2"
              :title="title"
            ></el-statistic>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-statistic title="盈利率">
              <template slot="formatter"> 120% </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-statistic
              group-separator=","
              :precision="2"
              decimal-separator="."
              :value="value1"
              title="今日收入"
            >
              <template slot="prefix">
                <i class="el-icon-s-flag" style="color: red"></i>
              </template>
              <template slot="suffix">
                <i class="el-icon-s-flag" style="color: blue"></i>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div id="echart1" :style="{ width: '100%', height: '300px' }"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="echart2" :style="{ width: '100%', height: '300px' }"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="div_box_center">
      <el-col :span="12">
        <el-card>
          <div id="echart3" :style="{ width: '100%', height: '300px' }"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="echart4" :style="{ width: '100%', height: '300px' }"></div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>
    
<script>
import * as echarts from "echarts";

export default {
  name: "hello",
  data() {
    return {
      msg: "Welcome to kalacloud.com",
      // hander-card
      like: true,
      value1: 4154.564,
      value2: 1314,
      title: "新增用户",

      echartsDataOne: {
        title: { text: "订单分析" },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 335,
                name: "直接访问",
              },
              {
                value: 234,
                name: "联盟广告",
              },
              {
                value: 1548,
                name: "搜索引擎",
              },
            ],
          },
        ],
      },
      echartsDataTwo: {
        title: { text: "财务分析" },
        xAxis: {
          data: ["A", "B", "C", "D", "E"],
        },
        yAxis: {},
        series: [
          {
            data: [10, 22, 28, 43, 49],
            type: "line",
            stack: "x",
          },
          {
            data: [5, 4, 3, 5, 10],
            type: "line",
            stack: "x",
          },
        ],
      },
      echartsDataThree: {
        title: { text: "综合分析" },
        tooltip: {},
        xAxis: {
          data: ["年订单数", "日均用餐人数", "最多菜品预定"],
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: [16, 25, 79],
          },
        ],
      },
      echartsDataForce: {
        title: {
          text: "菜品数据统计",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
        },
        series: [
          {
            name: "2011",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744, 630230],
          },
          {
            name: "2012",
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141, 681807],
          },
        ],
      },
    };
  },
  mounted() {
    const myChartOne = echarts.init(document.getElementById("echart1"));
    // 绘制图表
    myChartOne.setOption(this.echartsDataOne);

    const myChartTwo = echarts.init(document.getElementById("echart2"));
    // 绘制图表
    myChartTwo.setOption(this.echartsDataTwo);

    const myChartThree = echarts.init(document.getElementById("echart3"));
    // 绘制图表
    myChartThree.setOption(this.echartsDataThree);

    const myChartForce = echarts.init(document.getElementById("echart4"));
    // 绘制图表
    myChartForce.setOption(this.echartsDataForce);
  },
  methods: {},
};
</script>
<style scoped>
.div_box_center {
  margin-top: 20px;
  text-align: center;
}
.hander-card {
  margin-bottom: 20px;
}
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
.datamap #one {
  height: 500px;
}

.datamap #two {
  height: 500px;
}
#myChart {
  margin: 0 auto;
}
</style>
    